

<!DOCTYPE html>
<!--[if IE]><![endif]-->
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Optimizing Performance - React</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta property="og:title" content="Optimizing Performance - React">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://facebook.github.io/react/docs/optimizing-performance.html">
  <meta property="og:image" content="https://facebook.github.io/react/img/logo_og.png">
  <meta property="og:description" content="A JavaScript library for building user interfaces">
  <meta property="fb:app_id" content="623268441017527">

  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="alternate" type="application/rss+xml" title="React" href="https://facebook.github.io/react/feed.xml">

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" />
  <link rel="stylesheet" href="/css/syntax.css">
  <link rel="stylesheet" href="/css/codemirror.css">
  <link rel="stylesheet" href="/css/react.css">

  <script src="//use.typekit.net/vqa1hcx.js"></script>
  <script>try{Typekit.load();}catch(e){}</script>

  <!--[if lte IE 8]>
  <script src="/js/html5shiv.min.js"></script>
  <script src="/js/es5-shim.min.js"></script>
  <script src="/js/es5-sham.min.js"></script>
  <![endif]-->
  <script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
  <script src="/js/codemirror.js"></script>
  <script src="/js/javascript.js"></script>
  <script src="/js/xml.js"></script>
  <script src="/js/jsx.js"></script>
  <script src="/js/react.js"></script>
  <script src="/js/react-dom.js"></script>
  <script src="/js/babel.min.js"></script>
  <script src="/js/live_editor.js"></script>
</head>
<body>

  <div class="container">

    <div class="nav-main">
  <div class="wrap">
    <a class="nav-home" href="/">
      <img class="nav-logo" src="/img/logo.svg" width="36" height="36">
      React
    </a>
    <div class="nav-lists">
      <ul class="nav-site nav-site-internal">
        <li><a href="/docs/hello-world.html" class="active">Docs</a></li>
        <li><a href="/tutorial/tutorial.html">Tutorial</a></li>
        <li><a href="/community/support.html">Community</a></li>
        <li><a href="/blog/">Blog</a></li>
        <li class="nav-site-search">
          <input id="algolia-doc-search" type="text" placeholder="Search docs..." />
        </li>
      </ul>
      <ul class="nav-site nav-site-external">
        <li><a href="https://github.com/facebook/react">GitHub</a></li>
        <li><a href="https://github.com/facebook/react/releases">v16.0.0-alpha.3</a></li>
      </ul>
    </div>
  </div>
</div>


    <section class="content wrap documentationContent">
  <div class="inner-content">
    <a class="edit-page-link" href="https://github.com/facebook/react/tree/master/docs/docs/optimizing-performance.md" target="_blank">Edit on GitHub</a>
    <h1>
      Optimizing Performance
    </h1>
    <div class="subHeader"></div>

    <p>Internally, React uses several clever techniques to minimize the number of costly DOM operations required to update the UI. For many applications, using React will lead to a fast user interface without doing much work to specifically optimize for performance. Nevertheless, there are several ways you can speed up your React application.</p>

<h2>Use The Production Build</h2>

<p>If you&#39;re benchmarking or experiencing performance problems in your React apps, make sure you&#39;re testing with the minified production build:</p>

<ul>
<li>For Create React App, you need to run <code>npm run build</code> and follow the instructions.</li>
<li>For single-file builds, we offer production-ready <code>.min.js</code> versions.</li>
<li>For Brunch, you need to add the <code>-p</code> flag to the <code>build</code> command.</li>
<li>For Browserify, you need to run it with <code>NODE_ENV=production</code>.</li>
<li>For Webpack, you need to add this to plugins in your production config:</li>
</ul>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="k">new</span> <span class="nx">webpack</span><span class="p">.</span><span class="nx">DefinePlugin</span><span class="p">({</span>
  <span class="s1">&#39;process.env&#39;</span><span class="o">:</span> <span class="p">{</span>
    <span class="nx">NODE_ENV</span><span class="o">:</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="s1">&#39;production&#39;</span><span class="p">)</span>
  <span class="p">}</span>
<span class="p">}),</span>
<span class="k">new</span> <span class="nx">webpack</span><span class="p">.</span><span class="nx">optimize</span><span class="p">.</span><span class="nx">UglifyJsPlugin</span><span class="p">()</span>
</code></pre></div>
<ul>
<li>For Rollup, you need to use the <a href="https://github.com/rollup/rollup-plugin-replace">replace</a> plugin <em>before</em> the <a href="https://github.com/rollup/rollup-plugin-commonjs">commonjs</a> plugin so that development-only modules are not imported. For a complete setup example <a href="https://gist.github.com/Rich-Harris/cb14f4bc0670c47d00d191565be36bf0">see this gist</a>.</li>
</ul>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">plugins</span><span class="o">:</span> <span class="p">[</span>
  <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;rollup-plugin-replace&#39;</span><span class="p">)({</span>
    <span class="s1">&#39;process.env.NODE_ENV&#39;</span><span class="o">:</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="s1">&#39;production&#39;</span><span class="p">)</span>
  <span class="p">}),</span>
  <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;rollup-plugin-commonjs&#39;</span><span class="p">)(),</span>
  <span class="c1">// ...</span>
<span class="p">]</span>
</code></pre></div>
<p>The development build includes extra warnings that are helpful when building your apps, but it is slower due to the extra bookkeeping it does.</p>

<h2>Profiling Components with Chrome Timeline</h2>

<p>In the <strong>development</strong> mode, you can visualize how components mount, update, and unmount, using the performance tools in supported browsers. For example:</p>

<p><center><img src="/img/blog/react-perf-chrome-timeline.png" width="651" height="228" alt="React components in Chrome timeline" /></center></p>

<p>To do this in Chrome:</p>

<ol>
<li><p>Load your app with <code>?react_perf</code> in the query string (for example, <code>http://localhost:3000/?react_perf</code>).</p></li>
<li><p>Open the Chrome DevTools <strong><a href="https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool">Timeline</a></strong> tab and press <strong>Record</strong>.</p></li>
<li><p>Perform the actions you want to profile. Don&#39;t record more than 20 seconds or Chrome might hang.</p></li>
<li><p>Stop recording.</p></li>
<li><p>React events will be grouped under the <strong>User Timing</strong> label.</p></li>
</ol>

<p>Note that <strong>the numbers are relative so components will render faster in production</strong>. Still, this should help you realize when unrelated UI gets updated by mistake, and how deep and how often your UI updates occur.</p>

<p>Currently Chrome, Edge, and IE are the only browsers supporting this feature, but we use the standard <a href="https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API">User Timing API</a> so we expect more browsers to add support for it.</p>

<h2>Avoid Reconciliation</h2>

<p>React builds and maintains an internal representation of the rendered UI. It includes the React elements you return from your components. This representation lets React avoid creating DOM nodes and accessing existing ones beyond necessity, as that can be slower than operations on JavaScript objects. Sometimes it is referred to as a &quot;virtual DOM&quot;, but it works the same way on React Native.</p>

<p>When a component&#39;s props or state change, React decides whether an actual DOM update is necessary by comparing the newly returned element with the previously rendered one. When they are not equal, React will update the DOM.</p>

<p>In some cases, your component can speed all of this up by overriding the lifecycle function <code>shouldComponentUpdate</code>, which is triggered before the re-rendering process starts. The default implementation of this function returns <code>true</code>, leaving React to perform the update:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">shouldComponentUpdate</span><span class="p">(</span><span class="nx">nextProps</span><span class="p">,</span> <span class="nx">nextState</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div>
<p>If you know that in some situations your component doesn&#39;t need to update, you can return <code>false</code> from <code>shouldComponentUpdate</code> instead, to skip the whole rendering process, including calling <code>render()</code> on this component and below.</p>

<h2>shouldComponentUpdate In Action</h2>

<p>Here&#39;s a subtree of components. For each one, <code>SCU</code> indicates what <code>shouldComponentUpdate</code> returned, and <code>vDOMEq</code> indicates whether the rendered React elements were equivalent. Finally, the circle&#39;s color indicates whether the component had to be reconciled or not.</p>

<figure><img src="/img/docs/should-component-update.png" /></figure>

<p>Since <code>shouldComponentUpdate</code> returned <code>false</code> for the subtree rooted at C2, React did not attempt to render C2, and thus didn&#39;t even have to invoke <code>shouldComponentUpdate</code> on C4 and C5.</p>

<p>For C1 and C3, <code>shouldComponentUpdate</code> returned <code>true</code>, so React had to go down to the leaves and check them. For C6 <code>shouldComponentUpdate</code> returned <code>true</code>, and since the rendered elements weren&#39;t equivalent React had to update the DOM.</p>

<p>The last interesting case is C8. React had to render this component, but since the React elements it returned were equal to the previously rendered ones, it didn&#39;t have to update the DOM.</p>

<p>Note that React only had to do DOM mutations for C6, which was inevitable. For C8, it bailed out by comparing the rendered React elements, and for C2&#39;s subtree and C7, it didn&#39;t even have to compare the elements as we bailed out on <code>shouldComponentUpdate</code>, and <code>render</code> was not called.</p>

<h2>Examples</h2>

<p>If the only way your component ever changes is when the <code>props.color</code> or the <code>state.count</code> variable changes, you could have <code>shouldComponentUpdate</code> check that:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">class</span> <span class="nx">CounterButton</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
  <span class="nx">constructor</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span>
    <span class="kr">super</span><span class="p">(</span><span class="nx">props</span><span class="p">);</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">state</span> <span class="o">=</span> <span class="p">{</span><span class="nx">count</span><span class="o">:</span> <span class="mi">1</span><span class="p">};</span>
  <span class="p">}</span>

  <span class="nx">shouldComponentUpdate</span><span class="p">(</span><span class="nx">nextProps</span><span class="p">,</span> <span class="nx">nextState</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">color</span> <span class="o">!==</span> <span class="nx">nextProps</span><span class="p">.</span><span class="nx">color</span><span class="p">)</span> <span class="p">{</span>
      <span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">count</span> <span class="o">!==</span> <span class="nx">nextState</span><span class="p">.</span><span class="nx">count</span><span class="p">)</span> <span class="p">{</span>
      <span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
  <span class="p">}</span>

  <span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">return</span> <span class="p">(</span>
      <span class="o">&lt;</span><span class="nx">button</span>
        <span class="nx">color</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">color</span><span class="p">}</span>
        <span class="nx">onClick</span><span class="o">=</span><span class="p">{()</span> <span class="o">=&gt;</span> <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">(</span><span class="nx">state</span> <span class="o">=&gt;</span> <span class="p">({</span><span class="nx">count</span><span class="o">:</span> <span class="nx">state</span><span class="p">.</span><span class="nx">count</span> <span class="o">+</span> <span class="mi">1</span><span class="p">}))}</span><span class="o">&gt;</span>
        <span class="nx">Count</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">count</span><span class="p">}</span>
      <span class="o">&lt;</span><span class="err">/button&gt;</span>
    <span class="p">);</span>
  <span class="p">}</span>
<span class="p">}</span>
</code></pre></div>
<p>In this code, <code>shouldComponentUpdate</code> is just checking if there is any change in <code>props.color</code> or <code>state.count</code>. If those values don&#39;t change, the component doesn&#39;t update. If your component got more complex, you could use a similar pattern of doing a &quot;shallow comparison&quot; between all the fields of <code>props</code> and <code>state</code> to determine if the component should update. This pattern is common enough that React provides a helper to use this logic - just inherit from <code>React.PureComponent</code>. So this code is a simpler way to achieve the same thing:</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kr">class</span> <span class="nx">CounterButton</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PureComponent</span> <span class="p">{</span>
  <span class="nx">constructor</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span>
    <span class="kr">super</span><span class="p">(</span><span class="nx">props</span><span class="p">);</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">state</span> <span class="o">=</span> <span class="p">{</span><span class="nx">count</span><span class="o">:</span> <span class="mi">1</span><span class="p">};</span>
  <span class="p">}</span>

  <span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">return</span> <span class="p">(</span>
      <span class="o">&lt;</span><span class="nx">button</span>
        <span class="nx">color</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">color</span><span class="p">}</span>
        <span class="nx">onClick</span><span class="o">=</span><span class="p">{()</span> <span class="o">=&gt;</span> <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">(</span><span class="nx">state</span> <span class="o">=&gt;</span> <span class="p">({</span><span class="nx">count</span><span class="o">:</span> <span class="nx">state</span><span class="p">.</span><span class="nx">count</span> <span class="o">+</span> <span class="mi">1</span><span class="p">}))}</span><span class="o">&gt;</span>
        <span class="nx">Count</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">count</span><span class="p">}</span>
      <span class="o">&lt;</span><span class="err">/button&gt;</span>
    <span class="p">);</span>
  <span class="p">}</span>
<span class="p">}</span>
</code></pre></div>
<p>Most of the time, you can use <code>React.PureComponent</code> instead of writing your own <code>shouldComponentUpdate</code>. It only does a shallow comparison, so you can&#39;t use it if the props or state may have been mutated in a way that a shallow comparison would miss.</p>

<p>This can be a problem with more complex data structures. For example, let&#39;s say you want a <code>ListOfWords</code> component to render a comma-separated list of words, with a parent <code>WordAdder</code> component that lets you click a button to add a word to the list. This code does <em>not</em> work correctly:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">class</span> <span class="nx">ListOfWords</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PureComponent</span> <span class="p">{</span>
  <span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">return</span> <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">words</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="s1">&#39;,&#39;</span><span class="p">)}</span><span class="o">&lt;</span><span class="err">/div&gt;;</span>
  <span class="p">}</span>
<span class="p">}</span>

<span class="kr">class</span> <span class="nx">WordAdder</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
  <span class="nx">constructor</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span>
    <span class="kr">super</span><span class="p">(</span><span class="nx">props</span><span class="p">);</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">state</span> <span class="o">=</span> <span class="p">{</span>
      <span class="nx">words</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;marklar&#39;</span><span class="p">]</span>
    <span class="p">};</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">handleClick</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">handleClick</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
  <span class="p">}</span>

  <span class="nx">handleClick</span><span class="p">()</span> <span class="p">{</span>
    <span class="c1">// This section is bad style and causes a bug</span>
    <span class="kr">const</span> <span class="nx">words</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">words</span><span class="p">;</span>
    <span class="nx">words</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="s1">&#39;marklar&#39;</span><span class="p">);</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">words</span><span class="o">:</span> <span class="nx">words</span><span class="p">});</span>
  <span class="p">}</span>

  <span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">return</span> <span class="p">(</span>
      <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span>
        <span class="o">&lt;</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleClick</span><span class="p">}</span> <span class="o">/&gt;</span>
        <span class="o">&lt;</span><span class="nx">ListOfWords</span> <span class="nx">words</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">words</span><span class="p">}</span> <span class="o">/&gt;</span>
      <span class="o">&lt;</span><span class="err">/div&gt;</span>
    <span class="p">);</span>
  <span class="p">}</span>
<span class="p">}</span>
</code></pre></div>
<p>The problem is that <code>PureComponent</code> will do a simple comparison between the old and new values of <code>this.props.words</code>. Since this code mutates the <code>words</code> array in the <code>handleClick</code> method of <code>WordAdder</code>, the old and new values of <code>this.props.words</code> will compare as equal, even though the actual words in the array have changed. The <code>ListOfWords</code> will thus not update even though it has new words that should be rendered.</p>

<h2>The Power Of Not Mutating Data</h2>

<p>The simplest way to avoid this problem is to avoid mutating values that you are using as props or state. For example, the <code>handleClick</code> method above could be rewritten using <code>concat</code> as:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">handleClick</span><span class="p">()</span> <span class="p">{</span>
  <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">(</span><span class="nx">prevState</span> <span class="o">=&gt;</span> <span class="p">({</span>
    <span class="nx">words</span><span class="o">:</span> <span class="nx">prevState</span><span class="p">.</span><span class="nx">words</span><span class="p">.</span><span class="nx">concat</span><span class="p">([</span><span class="s1">&#39;marklar&#39;</span><span class="p">])</span>
  <span class="p">}));</span>
<span class="p">}</span>
</code></pre></div>
<p>ES6 supports a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">spread syntax</a> for arrays which can make this easier. If you&#39;re using Create React App, this syntax is available by default.</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">handleClick</span><span class="p">()</span> <span class="p">{</span>
  <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">(</span><span class="nx">prevState</span> <span class="o">=&gt;</span> <span class="p">({</span>
    <span class="nx">words</span><span class="o">:</span> <span class="p">[...</span><span class="nx">prevState</span><span class="p">.</span><span class="nx">words</span><span class="p">,</span> <span class="s1">&#39;marklar&#39;</span><span class="p">],</span>
  <span class="p">}));</span>
<span class="p">};</span>
</code></pre></div>
<p>You can also rewrite code that mutates objects to avoid mutation, in a similar way. For example, let&#39;s say we have an object named <code>colormap</code> and we want to write a function that changes <code>colormap.right</code> to be <code>&#39;blue&#39;</code>. We could write:</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">function</span> <span class="nx">updateColorMap</span><span class="p">(</span><span class="nx">colormap</span><span class="p">)</span> <span class="p">{</span>
  <span class="nx">colormap</span><span class="p">.</span><span class="nx">right</span> <span class="o">=</span> <span class="s1">&#39;blue&#39;</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div>
<p>To write this without mutating the original object, we can use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign">Object.assign</a> method:</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">function</span> <span class="nx">updateColorMap</span><span class="p">(</span><span class="nx">colormap</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">return</span> <span class="nb">Object</span><span class="p">.</span><span class="nx">assign</span><span class="p">({},</span> <span class="nx">colormap</span><span class="p">,</span> <span class="p">{</span><span class="nx">right</span><span class="o">:</span> <span class="s1">&#39;blue&#39;</span><span class="p">});</span>
<span class="p">}</span>
</code></pre></div>
<p><code>updateColorMap</code> now returns a new object, rather than mutating the old one. <code>Object.assign</code> is in ES6 and requires a polyfill.</p>

<p>There is a JavaScript proposal to add <a href="https://github.com/sebmarkbage/ecmascript-rest-spread">object spread properties</a> to make it easier to update objects without mutation as well:</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">function</span> <span class="nx">updateColorMap</span><span class="p">(</span><span class="nx">colormap</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">return</span> <span class="p">{...</span><span class="nx">colormap</span><span class="p">,</span> <span class="nx">right</span><span class="o">:</span> <span class="s1">&#39;blue&#39;</span><span class="p">};</span>
<span class="p">}</span>
</code></pre></div>
<p>If you&#39;re using Create React App, both <code>Object.assign</code> and the object spread syntax are available by default.</p>

<h2>Using Immutable Data Structures</h2>

<p><a href="https://github.com/facebook/immutable-js">Immutable.js</a> is another way to solve this problem. It provides immutable, persistent collections that work via structural sharing:</p>

<ul>
<li><em>Immutable</em>: once created, a collection cannot be altered at another point in time.</li>
<li><em>Persistent</em>: new collections can be created from a previous collection and a mutation such as set. The original collection is still valid after the new collection is created.</li>
<li><em>Structural Sharing</em>: new collections are created using as much of the same structure as the original collection as possible, reducing copying to a minimum to improve performance.</li>
</ul>

<p>Immutability makes tracking changes cheap. A change will always result in a new object so we only need to check if the reference to the object has changed. For example, in this regular JavaScript code:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">const</span> <span class="nx">x</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">foo</span><span class="o">:</span> <span class="s2">&quot;bar&quot;</span> <span class="p">};</span>
<span class="kr">const</span> <span class="nx">y</span> <span class="o">=</span> <span class="nx">x</span><span class="p">;</span>
<span class="nx">y</span><span class="p">.</span><span class="nx">foo</span> <span class="o">=</span> <span class="s2">&quot;baz&quot;</span><span class="p">;</span>
<span class="nx">x</span> <span class="o">===</span> <span class="nx">y</span><span class="p">;</span> <span class="c1">// true</span>
</code></pre></div>
<p>Although <code>y</code> was edited, since it&#39;s a reference to the same object as <code>x</code>, this comparison returns <code>true</code>. You can write similar code with immutable.js:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">const</span> <span class="nx">SomeRecord</span> <span class="o">=</span> <span class="nx">Immutable</span><span class="p">.</span><span class="nx">Record</span><span class="p">({</span> <span class="nx">foo</span><span class="o">:</span> <span class="kc">null</span> <span class="p">});</span>
<span class="kr">const</span> <span class="nx">x</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SomeRecord</span><span class="p">({</span> <span class="nx">foo</span><span class="o">:</span> <span class="s1">&#39;bar&#39;</span>  <span class="p">});</span>
<span class="kr">const</span> <span class="nx">y</span> <span class="o">=</span> <span class="nx">x</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="s1">&#39;foo&#39;</span><span class="p">,</span> <span class="s1">&#39;baz&#39;</span><span class="p">);</span>
<span class="nx">x</span> <span class="o">===</span> <span class="nx">y</span><span class="p">;</span> <span class="c1">// false</span>
</code></pre></div>
<p>In this case, since a new reference is returned when mutating <code>x</code>, we can safely assume that <code>x</code> has changed.</p>

<p>Two other libraries that can help use immutable data are <a href="https://github.com/rtfeldman/seamless-immutable">seamless-immutable</a> and <a href="https://github.com/kolodny/immutability-helper">immutability-helper</a>.</p>

<p>Immutable data structures provide you with a cheap way to track changes on objects, which is all we need to implement <code>shouldComponentUpdate</code>. This can often provide you with a nice performance boost.</p>


    <div class="docs-prevnext">
      
      
    </div>
  </div>

  <div class="nav-docs">
  <!-- Docs Nav -->
  
    <div class="nav-docs-section">
      <h3>Quick Start</h3>
      <ul>
        
          <li>
            <a href="/docs/installation.html">Installation</a>
            
          </li>
        
          <li>
            <a href="/docs/hello-world.html">Hello World</a>
            
          </li>
        
          <li>
            <a href="/docs/introducing-jsx.html">Introducing JSX</a>
            
          </li>
        
          <li>
            <a href="/docs/rendering-elements.html">Rendering Elements</a>
            
          </li>
        
          <li>
            <a href="/docs/components-and-props.html">Components and Props</a>
            
          </li>
        
          <li>
            <a href="/docs/state-and-lifecycle.html">State and Lifecycle</a>
            
          </li>
        
          <li>
            <a href="/docs/handling-events.html">Handling Events</a>
            
          </li>
        
          <li>
            <a href="/docs/conditional-rendering.html">Conditional Rendering</a>
            
          </li>
        
          <li>
            <a href="/docs/lists-and-keys.html">Lists and Keys</a>
            
          </li>
        
          <li>
            <a href="/docs/forms.html">Forms</a>
            
          </li>
        
          <li>
            <a href="/docs/lifting-state-up.html">Lifting State Up</a>
            
          </li>
        
          <li>
            <a href="/docs/composition-vs-inheritance.html">Composition vs Inheritance</a>
            
          </li>
        
          <li>
            <a href="/docs/thinking-in-react.html">Thinking In React</a>
            
          </li>
        
      </ul>
    </div>
  
    <div class="nav-docs-section">
      <h3>Advanced Guides</h3>
      <ul>
        
          <li>
            <a href="/docs/jsx-in-depth.html">JSX In Depth</a>
            
          </li>
        
          <li>
            <a href="/docs/typechecking-with-proptypes.html">Typechecking With PropTypes</a>
            
          </li>
        
          <li>
            <a href="/docs/refs-and-the-dom.html">Refs and the DOM</a>
            
          </li>
        
          <li>
            <a href="/docs/uncontrolled-components.html">Uncontrolled Components</a>
            
          </li>
        
          <li>
            <a href="/docs/optimizing-performance.html" class="active">Optimizing Performance</a>
            
          </li>
        
          <li>
            <a href="/docs/react-without-es6.html">React Without ES6</a>
            
          </li>
        
          <li>
            <a href="/docs/react-without-jsx.html">React Without JSX</a>
            
          </li>
        
          <li>
            <a href="/docs/reconciliation.html">Reconciliation</a>
            
          </li>
        
          <li>
            <a href="/docs/context.html">Context</a>
            
          </li>
        
          <li>
            <a href="/docs/web-components.html">Web Components</a>
            
          </li>
        
          <li>
            <a href="/docs/higher-order-components.html">Higher-Order Components</a>
            
          </li>
        
      </ul>
    </div>
  
    <div class="nav-docs-section">
      <h3>Reference</h3>
      <ul>
        
          <li>
            <a href="/docs/react-api.html">React</a>
            
              <ul>
                
                  <li>
                    <a href="/docs/react-component.html">React.Component</a>
                  </li>
                
              </ul>
            
          </li>
        
          <li>
            <a href="/docs/react-dom.html">ReactDOM</a>
            
          </li>
        
          <li>
            <a href="/docs/react-dom-server.html">ReactDOMServer</a>
            
          </li>
        
          <li>
            <a href="/docs/dom-elements.html">DOM Elements</a>
            
          </li>
        
          <li>
            <a href="/docs/events.html">SyntheticEvent</a>
            
          </li>
        
          <li>
            <a href="/docs/addons.html">Add-Ons</a>
            
              <ul>
                
                  <li>
                    <a href="/docs/perf.html">Performance Tools</a>
                  </li>
                
                  <li>
                    <a href="/docs/test-utils.html">Test Utilities</a>
                  </li>
                
                  <li>
                    <a href="/docs/animation.html">Animation</a>
                  </li>
                
                  <li>
                    <a href="/docs/create-fragment.html">Keyed Fragments</a>
                  </li>
                
                  <li>
                    <a href="/docs/update.html">Immutability Helpers</a>
                  </li>
                
                  <li>
                    <a href="/docs/pure-render-mixin.html">PureRenderMixin</a>
                  </li>
                
                  <li>
                    <a href="/docs/shallow-compare.html">Shallow Compare</a>
                  </li>
                
                  <li>
                    <a href="/docs/two-way-binding-helpers.html">Two-way Binding Helpers</a>
                  </li>
                
              </ul>
            
          </li>
        
      </ul>
    </div>
  

  <!-- Contributing Nav -->
  
    <div class="nav-docs-section">
      <h3>Contributing</h3>
      <ul>
        
          <li>
            <a href="/contributing/how-to-contribute.html">How to Contribute</a>
          </li>
        
          <li>
            <a href="/contributing/codebase-overview.html">Codebase Overview</a>
          </li>
        
          <li>
            <a href="/contributing/implementation-notes.html">Implementation Notes</a>
          </li>
        
          <li>
            <a href="/contributing/design-principles.html">Design Principles</a>
          </li>
        
      </ul>
    </div>
  

</div>

</section>


    <footer class="nav-footer">
  <section class="sitemap">
    <a href="/" class="nav-home">
    </a>
    <div>
      <h5><a href="/docs/">Docs</a></h5>
      <a href="/docs/hello-world.html">Quick Start</a>
      <a href="/docs/thinking-in-react.html">Thinking in React</a>
      <a href="/tutorial/tutorial.html">Tutorial</a>
      <a href="/docs/jsx-in-depth.html">Advanced Guides</a>
    </div>
    <div>
      <h5><a href="/community/support.html">Community</a></h5>
      <a href="http://stackoverflow.com/questions/tagged/reactjs" target="_blank">Stack Overflow</a>
      <a href="https://discuss.reactjs.org/" target="_blank">Discussion Forum</a>
      <a href="https://discord.gg/0ZcbPKXt5bZjGY5n" target="_blank">Reactiflux Chat</a>
      <a href="https://www.facebook.com/react" target="_blank">Facebook</a>
      <a href="https://twitter.com/reactjs" target="_blank">Twitter</a>
    </div>
    <div>
      <h5><a href="/community/support.html">Resources</a></h5>
      <a href="/community/conferences.html">Conferences</a>
      <a href="/community/videos.html">Videos</a>
      <a href="https://github.com/facebook/react/wiki/Examples" target="_blank">Examples</a>
      <a href="https://github.com/facebook/react/wiki/Complementary-Tools" target="_blank">Complementary Tools</a>
    </div>
    <div>
      <h5>More</h5>
      <a href="/blog/">Blog</a>
      <a href="https://github.com/facebook/react" target="_blank">GitHub</a>
      <a href="http://facebook.github.io/react-native/" target="_blank">React Native</a>
      <a href="/acknowledgements.html">Acknowledgements</a>
    </div>
  </section>
  <a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource">
    <img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/>
  </a>
  <section class="copyright">
    Copyright © 2017 Facebook Inc.
  </section>
</footer>

  </div>

  <div id="fb-root"></div>
  <script src="/js/anchor-links.js"></script>
  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
    ga('create', 'UA-41298772-1', 'facebook.github.io');
    ga('send', 'pageview');

    !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");

    (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6&appId=623268441017527";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

    docsearch({
      apiKey: '36221914cce388c46d0420343e0bb32e',
      indexName: 'react',
      inputSelector: '#algolia-doc-search'
    });
  </script>
</body>
</html>
